<template>
  <el-dialog title="新增权限"
             @close="closed"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="150px"
      size="large"
      status-icon
    >
      <el-form-item label="父级权限:" prop="parentId">
        <el-select v-model="ruleForm.parentId" placeholder="parentId">
          <el-option value="0" label='root'></el-option>
          <el-option
            v-for="option in optionsRef"
            :value="option.id"
            :key="option.id"
            :label="option.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="访问url:" prop="path">
        <el-input v-model="ruleForm.path" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="跳转路径:" prop="redirect">
        <el-input v-model="ruleForm.redirect"  type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="资源相对路径:" prop="component">
        <el-input v-model="ruleForm.component" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="icon:" prop="icon">
        <el-input v-model="ruleForm.icon" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="权限名称:" prop="name">
        <el-input v-model="ruleForm.name" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="描述:" prop="description">
        <el-input v-model="ruleForm.description" type="text" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closed(ruleFormRef)">取消</el-button>
      <el-button @click="reset(ruleFormRef)">重置</el-button>
      <el-button type="primary" @click="onComfirm(ruleFormRef)">确认添加</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { permissionadd } from '../../../../api/permission'
import { useStore } from 'vuex'
import { FormInstance, FormRules } from 'element-plus'
const optionsRef = ref()
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  parentId: '',
  path: '',
  redirect: '',
  icon: '',
  component: '',
  name: '',
  description: ''
})
const rules = reactive<FormRules>({
  parentId: [
    { required: true, message: 'Please select parentId', trigger: 'change' }
  ],
  path: [
    {
      required: false,
      message: 'Please input path',
      trigger: 'blur'
    }
  ],
  redirect: [
    {
      required: false,
      message: 'Please input name',
      trigger: 'blur'
    }
  ],
  component: [
    {
      required: false,
      message: 'Please input name',
      trigger: 'blur'
    }
  ],
  icon: [{
    required: false,
    message: 'Please input icon',
    trigger: 'blur'
  }],
  name: [
    { required: true, message: 'Please input name', trigger: 'blur' },
    { min: 3, max: 30, message: 'Length should be 3 to 10', trigger: 'blur' }
  ],
  description: [
    {
      required: true,
      message: 'Please input description',
      trigger: 'blur'
    }
  ]
})
const emits = defineEmits(['update:modelValue', 'updateResource'])
const onComfirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (!valid) return
    console.log(ruleForm)
    await permissionadd(ruleForm)
    emits('updateResource')
    closed(formEl)
  })
}
const reset = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const closed = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  emits('update:modelValue', false)
}
const store = useStore()
onMounted(() => {
  optionsRef.value = store.getters.userInfo.permission.menu
})
</script>
<style scoped lang="scss">
</style>
